<template>
<div>
      <input type="text" name="" id="" v-model="todo">
      <button @click="add()">增加</button>
      <h2>进行中</h2>
      <ul v-for="(item, key) in list" :key="key">
        <li  v-if="!item.checked">
          <input type="checkbox" name="" id="" v-model="item.checked"  @change="add2()">
          {{ item.title }}<button @click="removeData(key)">删除</button>
          </li>
      </ul>
      <h2>已完成</h2>
      <ul v-for="(item, key) in list" :key="key">
        <li  v-if="item.checked">
          <input type="checkbox" name="" id="" v-model="item.checked"  @change="add2()">
          {{ item.title }}<button @click="removeData(key)">删除</button>
          </li>
      </ul>
    </div>

  
</template>

<script>
import storage from './model/storage'
export default {
  data () {
    return {
     todo:'',
      list:[
        {title:'进行中',checked:true},
        {title:'已完成',checked:false}
      ]
    }
    
    
  },
  methods:{
    add(){
      this.list.push({
        title:this.todo,
        checked:false
      });
      this.todo = '';
      //localStorage.setItem('key',JSON.stringify(this.list));
      storage.set('list',this.list)
    },
    removeData(key){
      this.list.splice(key,1);
      //localStorage.setItem('key',JSON.stringify(this.list));
      storage.set('list',this.list)
    },
    add2(){
      //localStorage.setItem('key',JSON.stringify(this.list));
      storage.set('list',this.list)
    }
  },
  mounted() {
    //var list = JSON.parse(localStorage.getItem('key'));
    var list = storage.get('list');
    if (list) {
      this.list = list
    }
    //console.log(this.list)
  },
}
</script>
